<template>
  <div class="cinema">
    <div class="topbar">
      <div class="city">
        <p @click="fn" class=".span">{{cityName}}</p>
        <i class="iconfont icon-xiaosanjiaodown"></i>
      </div>
      <div class="search" @click="goSearch">
        <i class="iconfont icon-ziyuan"></i>
        <span>搜影院</span>
      </div>
    </div>
    <div class="tab">
      <ul class="open-tab">
        <li class="region td chosenTitle ac" @click="select">
          全城
          <i class="iconfont icon-xiaosanjiaodown"></i>
        </li>
        <li class="brand td">
          品牌
          <i class="iconfont icon-xiaosanjiaodown"></i>
        </li>
        <li class="ct td">
          特色
          <i class="iconfont icon-xiaosanjiaodown"></i>
        </li>
      </ul>
      <div class="close-tab" v-show="this.flag">
        <div class="page region ac">
          <ul id="region-tab">
            <li class="item chose">商区</li>
            <li class="item">地铁站</li>
          </ul>
          <div id="region-list">
            <ul id="region-sidenav">
              <li
                class="item chosen"
                v-for="(item,index) in filterCinemas.district&&filterCinemas.district.subItems"
                :key="index"
                @click="sSelect(item.id)"
              >{{item.name}}({{item.count}})</li>
              <!-- <li class="item">武侯区(25)</li>
                            <li class="item">锦江区(14)</li>
              <li class="item">双流区(23)</li>-->
            </ul>
            <ul id="region-list-item" v-show="this.flag1">
              <li
                class="item chosen all"
                v-for="(item,index) in items[0]&&items[0].subItems"
                :key="index"
              >
                <span class="item-name">{{item.name}}</span>
                <span class="item-count">{{item.count}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="page brand " >
          <ul class="brand-content">
            <li class="item brand-list chosen">
              <span class="brand-name">太平洋影城</span>
              <span class="brand-count">35</span>
            </li>
          </ul>
        </div> 
        <div class="page special ">
          <div class="special-content">
            <p class="item-title">特色功能</p>
            <ul class="item-list">
              <li>全部</li>
              <li>可改签</li>
            </ul>
            <p class="item-title">特殊厅</p>
            <ul class="item-list">
              <li>全部</li>
              <li>IMAX厅</li>
              <li>CGS中国巨幕厅</li>
              <li>杜比全景声厅</li>
            </ul>
          </div>
          <div class="special-btn">
            <span class="btn" id="cancel-btn">重置</span>
            <span class="btn" id="confirm-btn">确认</span>
          </div>
        </div>
      </div>
    </div>
    <ul
      class="desc"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="20"
    >
      <li v-for="(item,index) in cinemas" :key="index">
        <div class="title">
          <span>{{item.nm}}</span>
          <span class="price-block">
            <span class="price">{{item.sellPrice}}</span>
            <span class="p">元起</span>
          </span>
        </div>
        <div class="location">
          <div class="flex">{{item.addr}}</div>
          <div class="distance">{{distance}} km</div>
        </div>
        <div class="lable">
          <span class="allowRefund" v-if="item.tag.allowRefund">退</span>
          <span class="buyout" v-if="item.tag.buyout">买断</span>
          <span class="endorse" v-if="item.tag.endorse">改签</span>
          <span class="snack" v-if="item.tag.snack">小吃</span>
          <span class="vipTag" v-if="item.tag.vipTag?true:false">{{item.tag.vipTag}}</span>
          <span class="hallType" v-for="(i,index) in item.tag.hallType" :key="index">{{i}}</span>
        </div>
        <div class="discount">
          <div class="div1" v-if="item.promotion.cardPromotionTag">
            <div class="pic1">
              <img
                src=""
              />
            </div>
            <div class="txt1">{{item.promotion.cardPromotionTag}}</div>
          </div>
          <div class="div1" v-if="item.promotion.starActivityTag">
            <div class="pic2">
              <img
                src=""
              />
            </div>
            <div class="txt2">{{item.promotion.starActivityTag}}</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { InfiniteScroll } from "mint-ui";
import Vue from "vue";
export default {
  name: "cinema",

  data() {
    return {
      cinemas: [], //存放请求回来的数据
      distance: (Math.random() * 20).toFixed(2), //产生距离随机数
      offset: 0, //加载时每次的数据量
      loding: false,
      day: Date.now(),
      total: 0, //请求得到数据的总条数
      filterCinemas: {}, //请求得到城市区域的信息
      flag: false,
      flag1: false, //控制二层选项卡
      cityName:"成都",
      items:[]
    };
  },
  watch:{
    cityName:{
      handler(n){
        this.cityName=this.$route.query.name || "成都"
        // console.log(this.name)
        // if(!this.name) this.name = "成都"
      },
      deep:true,
      immediate:true
    }
  },
  created() {
    if (this.cinemas.length == 0) {
      this.getData();
    }
    this.doFilter();
  },
  mounted() {
    $(".navBar").css({ "z-index": 10 ,'display':'block'});
    $(".navBar h1").html("影院");
  },
  methods: {
    fn(){
      this.$router.push('/city')
    },
    loadMore() {
      if (this.offset <= this.total && this.offset != 0) {
        this.getData();
      }
    },
    getData() {
      this.loding = true;
      this.$axios
        .get("http://www.softeem.xin/maoyanApi/ajax/cinemaList", {
          params: {
            day: `this.day|formatTime(4)`,
            offset: this.offset,
            limit: 20,
            districtId: -1,
            lineId: -1,
            hallType: -1,
            brandId: -1,
            serviceId: -1,
            areaId: -1,
            stationId: -1,
            item: "",
            updateShowDay: true,
            reqId: Date.now(),
            cityId: 59
          }
        })
        .then(res => {
          this.cinemas = this.cinemas.concat(res.data.cinemas);
          this.total = res.data.paging.total;
          this.loding = false;
          this.offset += 20;
          //console.log(this.cinemas)
          // console.log(this.total)
        });
    },
    doFilter() {
      this.$axios
        .get("http://www.softeem.xin/maoyanApi/ajax/filterCinemas?ci=59")
        .then(res => {
          this.filterCinemas = res.data;
          // console.log(this.filterCinemas);
          // console.log(this.filterCinemas.district.subItems);
        });
    },
    select() {
      //点击全城时
      this.flag = !this.flag;
      
    },
    sSelect(id) {
      this.flag1 = !this.flag1;
     this.items = this.filterCinemas.district.subItems.filter((item)=>{
        return item.id === id
      })
      // console.log(this.items)
    },
    goSearch() {
      //跳转影院搜索
      this.$router.push("/search");
    }
  },
  filter: {
    formatTime(timeStamp, n) {
      var s = new Date(timeStamp);
      return (
        (n === 2 ? String(s.getFullYear()).slice(2) : s.getFullYear()) +
        "-" +
        (s.getMonth() + 1) +
        "-" +
        s.getDate()
      );
    }
  }
};
</script>

<style scoped lang="scss">
.cinema {
  .topbar {
    width: 100%;
    height: 0.9rem;
    background: #f5f5f5;
    position: fixed;
    top: 1rem;
    left: 0;
    display: flex;
    align-items: center;
    z-index: 20;
    .city {
      line-height: 0.28rem;
      padding-left: 0.3rem;
      font-size: 0.28rem;
      color: #666;
      display: flex;
      align-items: center;
      .span{
        display: inline-block;
        font-size: 0.3rem;
        color: #444444;
        padding-left: 0.3rem;
        font-weight: 400;
      }
      span {
        display: block;
        max-width: 1.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      i {
        font-size: 0.28rem;
      }
    }
    .search {
      width: 70%;
      height: 0.56rem;
      display: flex;
      align-items: center;
      font-size: 0.26rem;
      text-align: center;
      color: #b2b2b2;
      margin-left: 0.36rem;
      border: 0.5px solid #e6e6e6;
      border-radius: 0.1rem;
      margin-right: 0.3rem;
      padding-left: 25%;
      i {
        font-size: 0.28rem;
        margin-right: 0.08rem;
      }
    }
  }
  .tab {
    width: 100%;
    color: #777;
    position: fixed;
    top: 1.9rem;
    left: 0;
    z-index: 20;
    .open-tab {
      display: flex;
      height: 0.8rem;
      background: #fff;
      border-bottom: 1px solid #eee;
      li.td {
        flex: 1;
        text-align: center;
        line-height: 0.8rem;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        font-size: 0.26rem;
        text-overflow: ellipsis;
        i {
          font-size: 0.26rem;
        }
      }
      li.ac {
        color: #e54847;
      }
      .brand {
        position: relative;
      }
      .brand:before {
        content: "";
        display: block;
        position: absolute;
        height: 0.4rem;
        top: 0.2rem;
        left: 0;
        border-left: 1px solid #e8e8e8;
      }
      .ct {
        position: relative;
      }
      .ct:before {
        content: "";
        display: block;
        position: absolute;
        height: 0.4rem;
        top: 0.2rem;
        left: 0;
        border-left: 1px solid #e8e8e8;
      }
    }
    .close-tab {
      position: relative;
      width: 100%;
      background: #fff;
      z-index: 21;
      overflow: scroll;
      font-size: 0.3rem;
      color: #777;
      font-size: 0.3rem;
      .page {
        background-color: #fff;
        overflow: auto;
        z-index: 22;
        display: block;
        width: 100%;
        //position: absolute;
        display: none;
      }
      .ac{
        display: block;
      }
      .region {
        #region-tab {
          height: 0.88rem;
          display: flex;
          li {
            position: relative;
            display: inline-block;
            padding: 0 10px;
            width: 50%;
            height: 100%;
            line-height: 44px;
            text-align: center;
            flex: 1;
          }
          li.chose {
            color: #f03d37;
            border-bottom: 2px solid #f03d37;
          }
        }
        #region-list {
          max-height: 6.62rem;
          background: #f5f5f5;
          overflow-y: auto;
          #region-sidenav {
            width: 35%;
            height: 100%;
            float: left;
            overflow: scroll;
            background: #fff;
            .item {
              height: 0.88rem;
              padding-left: 0.2rem;
              line-height: 0.88rem;
              font-size: 0.28rem;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .chosen {
              color: #f03d37;
              background: #f5f5f5;
            }
          }
          #region-list-item {
            width: 65%;
            height: 100%;
            float: right;
            overflow: scroll;
            .item {
              position: relative;
              height: 0.9rem;
              line-height: 0.9rem;
              padding: 0 0 0 0.5rem;
              span {
                display: inline-block;
              }
              .item-name {
                width: 80%;
                font-size: 0.28rem;
                color: #333;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              }
              .item-count {
                float: right;
                width: 0.4rem;
                margin-right: 0.2rem;
                color: #8f9296;
                font-size: 0.24rem;
                text-align: right;
              }
            }
            .chosen {
              color: #f03d37;
            }
            .all:before {
              content: "";
              display: block;
              position: absolute;
              left: 0.16rem;
              top: 0.38rem;
              width: 0.23rem;
              height: 0.16rem;
              background-image: url();
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
      .brand{
        min-height: 3rem;
        max-height: 7.04rem;
        .brand-list{
          position: relative;
          line-height: .88rem;
          height: .88rem;
          padding: 0 .3rem 0 .52rem;
          border-bottom: 1px solid #e5e5e5;
          color: #333;
          float: left;
          span{
            display: inline-block;
            width: 49%;
          }
          .brand-list{
            line-height: .88rem;
            color: #333;
          }
          .brand-count{
            text-align: right;
            color: #8f9296;
            font-size: .24rem;
          }
          
        }
        .chosen{
          color: #dd403b;
        }
        .chosen:before{
              content: "";
              display: block;
              position: absolute;
              left: 8px;
              top: 18px;
              width: 11.5px;
              height: 8px;
              background-image: url(…/luvFa89aFyQAtNjaWOn44wYgRR/Plkp9G4mst+L/57S+eQuIEp8oPOAAAAABJRU5ErkJggg==);
              background-repeat: no-repeat;
              background-size: 100% 100%;
        }
      }
      .special{
        min-height: 5.16rem;
        .special-content{
          min-height: 3rem;
          max-height: 5.4rem;
          overflow: scroll;
          .item-title{
            margin-left: .24rem;
            margin-top: .22rem;
            font-size: .3rem;
          }
          .item-list{
            margin: 0 .24rem .24rem;
            li{
              float: left;
              width: 21.3%;
              height: .6rem;
              padding: 3px 0;
              margin-right: 3%;
              margin-top: .2rem;
              line-height: .5rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: center;
              border: 1px solid #ccc;
              border-radius: 5px;
              font-size: .3rem;
            }
            li.chosen{
              background: #fcf0f0;
              color: #f03d37;
              border: 1px solid #f03d37;
            }
          }
        }
        .special-btn{
          height: 1.2rem;
          width: 100%;
          border-top: 1px solid #e5e5e5;
          margin-top: .2rem;
          background: #fafafa;
          .btn{
              display: inline-block;
              height: .68rem;
              width: 21.3%;
              margin: .26rem .22rem;
              border: 1px solid #e5e5e5;
              border-radius: .12rem;
              text-align: center;
              line-height: .68rem;
              font-size: .28rem;
          }
          #confirm-btn{
            float: right;
            background: #f03d37;
            border: 1px solid #f03d37;
            color: #fff;
          }
        }
      }
    }
  }
  .desc {
    width: 100%;
    background: #fff;
    margin-top: 2.7rem;
    margin-bottom: 0.97rem;
    li {
      min-height: 1.98rem;
      padding: 0.26rem 0.3rem 0.26rem 0;
      margin-left: 0.3rem;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid #eee;
      .title {
        height: 0.46rem;
        line-height: 0.46rem;
        font-size: 0.32rem;
        color: #000;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        .price-block {
          // display: block;
          padding: 0.18rem 0 0 0.06rem;
          color: #f03d37;
          .price {
            font-size: 0.36rem;
          }
          .p {
            margin-left: 0.06rem;
            font-size: 0.22rem;
          }
        }
      }
      .location {
        margin-top: 0.12rem;
        font-size: 0.26rem;
        color: #666;
        line-height: 1.5;
        display: flex;
        .flex {
          flex: 1;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .distance {
          margin-left: 0.1rem;
        }
      }
      .lable {
        height: 0.34rem;
        line-height: 0.34rem;
        margin-top: 0.08rem;
        margin-bottom: 0.08rem;
        overflow: hidden;
        span {
          display: inline-block;
          padding: 0 3px;
          line-height: 0.3rem;
          border-radius: 2px;
          font-size: 0.26rem;
          margin-right: 0.1rem;
        }
        .endorse,
        .allowRefund {
          color: #589daf;
          border: 1px solid #589daf;
        }
        .snack,
        .vipTag {
          color: #f90;
          border: 1px solid #f90;
        }
        .hallType {
          color: #589daf;
          border: 1px solid #589daf;
        }
      }
      .discount {
        color: #999;
        margin-bottom: 0.08rem;
        font-size: 0.28rem;
        .div1 {
          display: flex;
          margin-bottom: 0.05rem;
          .pic1,
          .pic2 {
            width: 0.3rem;
            height: 0.28rem;
            position: relative;
            top: -2px;
            img {
              width: 0.3rem;
              height: 0.28rem;
            }
          }
          .txt1,
          .txt2 {
            font-size: 0.22rem;
            line-height: 0.22rem;
            margin-left: 0.2rem;
          }
        }
      }
    }
  }
}
</style>